<template>
	<!-- 基础卡片 -->
	<view>
	<view class="order-card">
		<view class="listcard">
		<view class="listcard-img">
			<!-- 完全填充 -->
			<image :src="order.leaf_img" mode="aspectFill"></image>
		</view>
		<view class="listcard-content">
			<view class="listcard-content-title">
				<text>{{order.leaf_name}}</text>
			</view>
			<view class="listcard-option">
				<view>{{order.oreder_num}}</view>
				<view>×{{order.order_count}}</view>
			</view>
			<view class="listcard-prove">
				<text>7天无理由退货</text>
			</view>
		</view>
		</view>
		<view class="listcard-content-des" >
			<view v-for="(item,index) in odtype">
			<view class="listcard-content-__des-browe" @click="tapCommit(index,order.order_id,order.leaf_id,order.oreder_num)">{{item}}</view>
			</view>
		</view>
		
	</view>
	
	</view>
</template>

<script>
	export default {
		name:"order-card",
		data() {
			return {
				odtype:["立即评价","取消订单","退换货","确认收货"]
			};
		},
		methods:{
			tapCommit(data,id,ld,dn){
				console.log("从子组件中调用打开弹出框操作")
				this.$parent.changBtn(data,id,ld,dn)
			},
			
		},
		onLoad(){
			console.log(this.order)
		},
		props:{
			order:{
				type:Object,
				default(){
					return {}
				}
			}
			// tapPop:{
			// 	type:Function,
			// 	require:true,
			// 	default:null
			// }
			}
		}
</script>

<style lang="scss">
.order-card{
		box-sizing: border-box;
		padding: 10px 10px;
		margin: 10px 10px;
		border-radius: 5px;
		box-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: 0.1);
		
	.listcard{
		box-sizing: border-box;
		display: flex;
		padding-bottom: 10px;
		.listcard-img{
			flex-shrink: 0;
			width: 60px;
			height: 60px;
			border-radius: 5px;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}
		
		.listcard-content{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding-left: 10px;
			width: 100%;
			
			.listcard-content-title{
				font-size: 14px;
				color: #333;
				font-weight: 400;
				line-height: 1.0;
				text{
					//文本超出部分...显示
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box ;
					-webkit-line-clamp:1;
					-webkit-box-orient:vertical;
				}
			}
			.listcard-option{
				display: flex;
				justify-content: space-between;
			}
			.listcard-prove{
				text{
					font-size: 10px;
					color: #ff6200;
					border: 1px solid;
					padding: 3px;
				}
			}
			
		}
	}
	.listcard-content-des{
		display: flex;
		//两端对齐
		justify-content: space-between;
		font-size: 12px;
		
		.listcard-content-__des-label{
			display: flex;
			.listcard-content-__des-label-item{
				padding: 0 5px;
				margin-right: 5px;
				border-radius: 15px;
				border: 1px red solid;
			}
		}
		.listcard-content-__des-browe{
			color: #999;
			line-height: 1.5;
			border: 1px solid;
			border-radius: 15px;
			padding: 5px 10px;
		}
	}
	}
	
</style>